﻿<!DOCTYPE html>
<!--相同的标签在不同的内核显示出来的样式是不一样的-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>常用的html块级标签（块元素）</title>
</head>
<body>
    <!--常用的有语义的块级元素 独占一行 有默认样式-->
    <!--标题标签-->
    <!--这是一个标题
    这是另一个标题-->
    <!--一个html尽量只有一个h1，方便搜索引擎搜索-->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

    <!--段落标签 独占一行 有默认样式-->
    <!--br标签强制换行-->
    <p>
        网易云课堂 - 我的职业课堂<br>
        网易云课堂，一个专注职业技能提升的在线学习平台。立足于实用性的要求，与多家教育培训机构和行业的专家、讲师建立合作，聚合了丰富的学习内容，包括课程、电子 ...

        https://study.163.com
        我的学习
        登录 - 网易云课堂. 网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线 …

        大学计算机专业
        汇集全国多家知名大学里广受学生好评的计算机老师，每一门课程都由他们亲自制作，权 …

        微专业
        针对职业岗位的体系化培训课程。直击就业痛点、行业专家亲授、企业真实案例实践，助 …

        我的优惠劵兑换
        网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线学习平台。

        我的订单
        网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线学习平台。

        全部课程
        网易云课堂，一个专注职业技能提升的在线学习平台。立足于实用性的要求，与多家教育 …

        反馈意见
        云课堂 - 网易云课堂. 网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线 …

        登录
        网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线学习平台。

    </p>

    <!--列表-->
    <!--无序列表 ul 独占一行 有默认样式
        注意：ul标签当中只能写li标签-->
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ul>
    <!--有序列表 ol
        type属性改变列表的标记类型
        start属性设置列表项从第几个标记开始
        注意：ol标签当中只能写li标签
        -->
    <ol type="i" start="2">
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ol>
    <!--自定义列表 dl dt dd-->
    <dl>
        <dt>这是自定义列表标题</dt>
        <dd>这是自定义列表</dd>
        <dd>这是自定义列表</dd>
        <dd>这是自定义列表</dd>
        <dt>这是自定义列表标题2</dt>
        <dt>这是自定义列表标题3</dt>
        <dd>这是自定义列表的解释</dd>
        <dd>这是自定义列表的解释2</dd>
        <dd>这是自定义列表的解释3</dd>
    </dl>
    <br /><br /><br /><p id="test">这是一个锚点测试位置</p><br /><br /><br />
    <!--表格标签
        table声明一个表格
        th表头
        tr 行
        td 列
        table属性： width 设置表格的总体宽度
                    height 设置表格的总体高度
                    border 设置边框是否显示；
                    cellpadding 设置表格当中的内容距离边框的距离
                    cellspacing 设置表格和表格之间的间距
        单元格合并：colspan 设置水平方向一个单元格占据的宽度
                    rowspan 设置垂直方向一个单元格占据的高度
        单元格内容对齐方式：align 默认是靠左显示，center居中，right 居右
                            valign 垂直对齐方式，默认垂直居中 top bottom
                            注意：如果给tr设置，会影响整行，如果给td设置，会影响单元格

        -->
    <table border="1" cellpadding="10" cellspacing="0" width="800" height="700">
        <!--表格中的行-->
        <tr align="center">

            <th colspan="4">这是表头</th>

            <!--表格中的列-->
            <!--<td colspan="4">
                这是第一行的第一列
            </td>-->
            <!--<td>
                这是第一行的第二列
            </td>
            <td>
                这是第一行的第三列
            </td>
            <td>
                这是第一行的第四列
            </td>-->
        </tr>
        <tr valign="bottom">
            <!--表格中的列-->
            <td rowspan="2">
                这是第二行的第一列
            </td>
            <td>
                这是第二行的第二列
            </td>
            <td>
                这是第二行的第三列
            </td>
            <td>
                这是第二行的第四列
            </td>
        </tr>
        <tr>
            <!--表格中的列-->
            <!--<td>
                这是第三行的第一列
            </td>-->
            <td>
                这是第三行的第二列
            </td>
            <td>
                这是第三行的第三列
            </td>
            <td>
                这是第三行的第四列
            </td>
        </tr>
    </table>

    <!--水平分割线-->
    <hr />
    <!--无意义的区块元素，无默认样式 没有默认语义 div 独占一行
        一般用来划定一块区域，配合css在布局中使用-->
    <div>这是一个div</div>
    <div>这是一个div2</div>
</body>
</html>